<template>
	<div class="renewContract">
		<group class="renewContractGroup">
			<div style="margin-top: 10px; margin-bottom: 10px">
				<span style="font-weight: bold; font-size: 18px; padding-left: 5px">{{title}}</span>
			</div>
		</group>

		<cell class="cellRenewContract"
		      v-for="item in items"
		      :title="item.student.substring(0,3)"
		      value-align="left"
		      @click.native="jumpTo(item.id)">
			<span class="tagLeft">{{item.lesson}}</span>
			<span style="float: left; padding: 5px;">剩余课时：{{item.points}}</span>
			<!--<span style="background-color: #43abe3; color: white;">{{item.lesson}}</span>
			<span style="color: black; padding-left: 15px">剩余课时：{{item.points}}</span>-->
		</cell>

		<x-button class="renewContractBtn" @click.native="viewMore">查看更多</x-button>

	</div>
</template>

<script>
	import NetWorking from '../../../../utils/networking'
	import dateutils from '../../../../utils/date'
	import {Group, Cell, XButton} from 'vux'
	export default {
		name: "renew-contract",
		components: {
			Group,
			Cell,
			XButton
		},
		data() {
			return {
				title: '待续课会员',
				items: []
			}
		},
		created: function () {
			let user = this.$store.state.user.userModel.sysUser

			let _this = this
			NetWorking.doGet(
				'ai/teachers/getRenewContractModelListByUser',
				null,
				{
					params: {
						username: user.username
					}
				}
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.items = rs.renew_contract_list
					}else{
						alert(rs.error_message)
					}
				}
			)
		},
		methods: {
			jumpTo: function (id) {
				//组件间传递参数
				this.$router.push({ name: "customerDetails", params: { id: id }})
			},

			viewMore: function () {
				this.$router.push({ name: "renewContractAll"})
			}
		}

	}
</script>

<style>
	.cellRenewContract{
		background-color: white;
		padding: 0px 15px !important;
	}

	.cellRenewContract > .weui-cell__ft{
		font-size: 12px;
		padding-left: 10px;
	}

	.cellRenewContract > .vux-cell-bd{
		font-size: 12px;
	}

	.renewContractBtn {
		background-color: white !important;
		border-radius: 0px !important;
		font-size: 14px !important;
		color: #528dd9 !important;
	}
</style>